<!-- 加载ckplayer视频插件 -->
<link rel="stylesheet" href="/assets/home/plugins/ckplayer/css/ckplayer.css" />
<script src="/assets/home/plugins/ckplayer/js/ckplayer.min.js"></script>
<link rel="stylesheet" href="/assets/home/css/details.css">

<div id="cover">
    <!-- 课程封面 -->

    <img class="cover_bg" src="{$subject['thumbs_cdn']}">


    <!-- 中间播放键 -->
    <div id="play">
        <img src="/assets/home/images/play.png" />
    </div>
</div>

<!-- ckplayer视频容器元素 -->
<div id="video"></div>

<!-- 课程信息 -->
<div class="head">
    <!-- 课程标题 -->
    <div class="weui-media-box__title">{$subject['title']}
        <span class="content">
            <!-- 点赞 -->
            <span id="zan">
                <!-- 判断用户是否点赞了 -->
                {if in_array("$busid", explode(',', $subject['likes']))}
                <!-- 点赞 -->
                <img id="likes" class="thumbs" src="/assets/home/images/thumbs-up.png" alt="">
                <!-- 未点赞 -->
                {else /}
                <img id="likes" class="thumbs" src="/assets/home/images/thumbs.png" alt="">
                {/if}

                <span class="num">{$subject['likes_text']}</span>
            </span>
        </span>
    </div>
    <div class="price">￥{$subject['price']}元&nbsp;&nbsp;</div>
</div>

<div class="title">
    课程介绍
</div>
{if empty($subject['content'])}
<div class="mui-table-view" style="padding:10px;">
    暂无课程描述
</div>
{else /}
<div class="mui-table-view" style="padding:10px;">
    {$subject['content']}
</div>
{/if}
<div class="title">
    课程章节
</div>
{if condition="$chapterlist"}
<ul class="mui-table-view">
    {foreach $chapterlist as $key=>$item}
    <li onclick="toggle('{$item.id}')" class="mui-table-view-cell active">{$key+1}、{$item['title']}</li>
    {/foreach}
</ul>
{else /}
<ul class="mui-table-view">
    <li class="mui-table-view-cell active">该课程目前没有章节</li>
</ul>
{/if}
<div class="title">
    用户评论
</div>
{if condition="$commentlist"}
<!-- 评论内容 -->
<ul id="comments" class="mui-table-view">
    {foreach $commentlist as $item}
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">

            <img class="mui-media-object mui-pull-left userimg" src="{$item.business.avatar_text}">

            <div class="mui-media-body">{$item.business.nickname_text}
                <p class='mui-ellipsis'>{$item['content']}</p>
            </div>
        </a>
    </li>
    {/foreach}
</ul>
{else /}
<ul class="mui-table-view">
    <li class="mui-table-view-cell mui-media">暂无评论</li>
</ul>
{/if}

{if ($count gt $limit)}
<div id="down" class="comment_more">
    <a id="comment-down" href="javascript:void(0)" class="mui-btn mui-btn-primary mui-btn-outlined">查看更多评论</a>
</div>
{/if}

<br />
<!-- 弹出菜单 -->
<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action">
    <!-- 可选择菜单 -->
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a id="buy" href="javascript:void(0)">
                立即购买
            </a>
        </li>
    </ul>
    <!-- 取消菜单 -->
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a href="#sheet1"><b>取消</b></a>
        </li>
    </ul>
</div>

</body>

</html>
<script>
    // 点赞功能
    // 获取点赞数组
    $likes = {$likes};

    // 点击事件
    $("#likes").click(function () {
        // 判断用户是否点赞
        if ($likes.includes("{$busid}")) {
            // 已点赞，则点击后让其状态变为未点赞状态
            $action = 'gray';
            if ($action == 'gray') {
                $("#likes").attr('src', '/assets/home/images/thumbs.png')
                $.ajax({
                    url: `{:url('/home/Subject/likes')}`,
                    type: 'post',
                    dataType: 'json',
                    data: {
                        action: $action,
                        subid: `{$subject['id']}`
                    },
                    success: function (success) {
                        console.log(success);
                        mui.toast(success.msg)
                        setTimeout(function () {
                            location.reload()
                        }, 1000)
                    }
                })
                $action = 'red'
            }
        }
        else {
            // 未点赞，点击后让其变为点赞状态
            $action = 'red'
            if ($action == 'red') {
                $("#likes").attr('src', '/assets/home/images/thumbs-up.png')
                $.ajax({
                    url: `{:url('/home/Subject/likes')}`,
                    type: 'post',
                    dataType: 'json',
                    data: {
                        action: $action,
                        subid: `{$subject['id']}`
                    },
                    success: function (success) {
                        console.log(success);
                        mui.toast(success.msg)
                        setTimeout(function () {
                            location.reload()
                        }, 1000)
                    }
                })
                $action = 'gray'
            }
        }
    })

    // 点击查看更多评论
    $("#comment-down").click(function () {
        var text = $("#comment-down").html();
        if (text == '查看更多评论') {
            $("#comment-down").html('收起更多评论')
            $.ajax({
                url: `{:url('/home/Subject/details')}`,
                type: 'post',
                dataType: 'json',
                data: {
                    subid: `{$subject['id']}`
                },
                success: function (success) {
                    console.log(success);
                    for (var item of success.data) {
                        console.log(item);
                        var temp = `<li class="mui-table-view-cell mui-media">
                                    <a href="javascript:void(0);">
                                        <img class="mui-media-object mui-pull-left userimg" src="${item.business.avatar_text}">
                                        <div class="mui-media-body">
                                            ${item.business.nickname_text}
                                            <p class='mui-ellipsis'>${item['content']}</p>
                                        </div>
                                    </a>
                                </li>`
                        $('ul#comments').append(temp)
                    }
                }
            })
        } else {
            $("#comment-down").html('查看更多评论')
            location.reload();
        }
    })

    // 获取课程id
    var subid = "{$subject.id}"
    //章节id
    var cid = 0;

    //视频对象容器全局
    var player;

    function toggle(id) {
        //覆盖全局
        cid = id
        //重置视频播放
        if (player) {
            player.pause()
            player.remove()
        }
        $("#cover").css('display', 'block')
        $("#video").css('display', 'none')
    }

    $("#iosActionsheetCancel").click(function () {
        mui('#sheet1').popover('toggle');
    })

    // 点击播放
    $("#play").on('click', function () {
        var auth = "{$auth}";
        if(auth === '' || auth.trim().length === 0)
        {
            mui.toast('请先登录')
        }else
        {
            if (auth == 0) {
                var btnArray = ['否', '是'];
                mui.confirm('您尚未通过邮箱认证，请问您确认去邮箱认证吗？', '尊敬的用户', btnArray, function (e) {
                    if (e.index == 1) {
                        location.href = `{:url('/home/business/index')}`
                    }
                });
                return false;
            }
        }
        // console.log(auth);
        
        $.ajax({
            url: `{:url('/home/subject/play')}`,
            type: 'post',
            dataType: 'json',
            data: {
                cid: cid,
                subid: subid
            },
            success: function (success) {
                if (success.code == 0) {
                    var buy = success.data.buy ? success.data.buy : false;
                    if (buy) {
                        mui('#sheet1').popover('toggle');
                        return false
                    } else {
                        mui.toast(success.msg)
                        return false
                    }
                }

                var url = success.data.url ? success.data.url : '';
                if (!url) {
                    mui.toast('暂无播放地址')
                    return false
                }
                $("#cover").css('display', 'none')
                $("#video").css('display', 'block')

                // 视频播放器对象
                var videoObject = {
                    container: '#video',//视频容器的ID
                    volume: 1,//默认音量，范围0-1
                    video: url,//视频地址
                    playbackrate: 1,//默认倍速
                    autoplay: true,//是否自动播放
                    loop: false,//是否需要循环播放
                    information: {
                        'Load:': '{loadTime} second',
                        'Duration:': '{duration} second',
                        'Size:': '{videoWidth}x{videoHeight}',
                        'Volume:': '{volume}%',
                        'Sudio decoded:': '{audioDecodedByteCount} Byte',
                        'Video decoded:': '{videoDecodedByteCount} Byte'
                    },
                };
                //初始化播放器
                player = new ckplayer(videoObject)
            }
        });
    })

    $("#buy").on('click', function () {
        mui('#sheet1').popover('toggle');
        var btnArray = ['否', '是'];
        mui.confirm('请问您确认购买吗？', '尊敬的用户', btnArray, function (e) {
            if (e.index == 1) {
                $.ajax({
                    url: `{:url('/home/Subject/buy')}`,
                    type: 'post',
                    dataType: 'json',
                    data: {
                        subid: subid
                    },
                    success: function (success) {
                        console.log(success);
                        if (success.code) {
                            mui.toast(success.msg)
                            setTimeout(function () {
                                location.href = `{:url('/home/subject/buycomplete',['cid'=>$subject['id']])}`
                                return false;
                            }, 2000)
                        } else {
                            mui.toast(success.msg)
                        }
                    }
                })

            }
        })

    })

</script>